<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/plugins/jquery.icheck.min.js"></script>
  <script src="../../scripts/plugins/jquery.tablesort.min.js"></script>
  <script src="../../scripts/plugins/jquery.ztree.all.min.js"></script>
  <script src="../../scripts/plugins/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="../../scripts/plugins/select2.min.js"></script>
  <script src="../../scripts/lib/echarts-3.7.1/echarts.min.js"></script>
</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>

  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li><a href="data-resource.html"><i class="icon-explore"></i><span>资源状态概览</span></a><em class="open"></em>
        <ul>
          <li><a href="data-resource.html">资源概览</a></li>
        </ul>
      </li>

      <li> <a href="data-traffic.html"><i class="icon-db-search"></i><span>流量分析</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-traffic.html">数据库流量</a></li>
          <li> <a href="data-traffic-ftp.html">FTP流量</a></li>
        </ul>
      </li>

      <li> <a href="data-flow.html"><i class="icon-db-search"></i><span>流向分析</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-flow.html">流向分析</a></li>
          <li><a  href="data-client.html">客户端管理</a></li>
          <li><a href="data-threshold.html">风险阀值配置</a></li>
        </ul>
      </li>

      <li class="active"> <a href="data-laws.html"><i class="icon-db-search"></i><span>使用规律分析</span></a><em class="open"></em>
        <ul>
          <li><a href="data-overview.html">概况</a></li>
          <li class="active"> <a href="data-laws.html">资源使用规律</a></li>
          <li><a href="data-userlaw.html">用户行为规律</a></li>
        </ul>
      </li>

      <li> <a href="data-riskevent..html"><i class="icon-db-search"></i><span>风险事件</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-riskevent-charts.html">风险概况</a></li>
          <li> <a href="data-riskevent.html">事件查看</a></li>

        </ul>
      </li>

      <li> <a href="data-resourceconfig.html"><i class="icon-notifications-on"></i><span>数据资源管理</span></a><em class="open"></em>
        <ul>
          <li><a href="data-resourceconfig.html">数据资源配置</a></li>
          <li><a href="data-ipconfig.html">参数配置</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title">
      <h2>资源使用规律</h2>
      <select>
        <option>请选择要分析的资源</option>
        <option>Hbase-1</option>
        <option>Hbase-2</option>
        <option>Oracle-1</option>
        <option>Oracle-2</option>
        <option>Solr</option>
        <option>门户网站</option>
        <option>数据资源共享目录</option>
        <option>在线政务</option>
      </select>
      <input type="text" placeholder="2017-08-21 ~ 2017-09-22" title="统计周期"> <button class="btn">分析</button>
    </div>

    <div class="sys-content">
      <div class="col-left">
        <div class="panel" style="min-height:720px;">
          <div class="panel-head">
            <div class="panel-title">
              <h3>资源概况</h3>
            </div>
            <div class="alink"><a id="tablefull" href="javascript:void(0)"></a></div>
          </div>
          <div class="panel-body">
            <table class="table">
              <tbody>
                <tr>
                  <td class="tdtit" style="width:40%">名称</td>
                  <td>HBASE</td>
                </tr>
                <tr>
                  <td class="tdtit">IP</td>
                  <td>172.17.25.221</td>
                </tr>
                <tr>
                  <td class="tdtit">重要度</td>
                  <td><label class="badge badge-gray">一般</label></td>
                </tr>
                <tr>
                  <td class="tdtit">访问次数</td>
                  <td>19,899,899</td>
                </tr>
                <tr>
                  <td class="tdtit">风险事件</td>
                  <td><label class="label label-danger">高：224</label> <label class="label label-warning">中：4214</label> <label class="label label-primary">低：3214</label></td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="panel-head">
            <div class="panel-title">
              <h3>表访问量排名TOP10</h3>
            </div>
          </div>
          <div class="panel-body">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>库表名称</th>
                  <th>访问人次</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>HBASE</td>
                  <td>2438542</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>HBASE</td>
                  <td>2354275</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>应用</td>
                  <td>1943989</td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>HBASE</td>
                  <td>1723120</td>
                </tr>
                <tr>
                  <td>5</td>
                  <td>应用</td>
                  <td>1523422</td>
                </tr>
                <tr>
                  <td>6</td>
                  <td>ORACLE</td>
                  <td>988934</td>
                </tr>
                <tr>
                  <td>7</td>
                  <td>ORACLE</td>
                  <td>873422</td>
                </tr>
                <tr>
                  <td>8</td>
                  <td>HBASE</td>
                  <td>76984</td>
                </tr>
                <tr>
                  <td>9</td>
                  <td>HBASE</td>
                  <td>54323</td>
                </tr>
                <tr>
                  <td>10</td>
                  <td>应用</td>
                  <td>43214</td>
                </tr>
              </tbody>
            </table>
          </div><!--panel-body end-->
        </div>
      </div>

      <div class="col-right" style="padding-left:20px;">
        <div class="panel" style="min-height:720px;">
<!--           <div class="panel-head">
            <div class="panel-title">
              <h3>流量概览</h3>
            </div>
          </div> -->
          <div class="panel-body">
            <div class="row">
              <div id="chart1" class="chart col-4">loading...</div>
              <div id="chart2" class="chart col-4">loading...</div>
              <div id="chart3" class="chart col-4">loading...</div>
            </div>
            <div class="row">
              <div id="chart4" class="chart">loading...</div>
            </div>


          </div><!--panel-body end-->
        </div>
      </div>

    </div>
  </div>



  <div class="dialog" id="info">
    <div class="dialog-win">
      <div class="dialog-head"><span>客户端详情</span><a class="close" href="javascript:void(0);"><i class="icon-close"></i></a></div>
      <div class="dialog-body">
        <table class="table table-striped">
          <thead>
            <tr>
              <th width="5%" class="no-sort">序号</th>
              <th>客户端名称</th>
              <th>客户端IP</th>
              <th>数据读取量</th>
              <th>数据写入量</th>
              <th>总量</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>交换服务1</td>
              <td>172.191.223.15</td>
              <td>300万条</td>
              <td>1325万条</td>
              <td>1325万条</td>
            </tr>
            <tr>
              <td>2</td>
              <td>交换服务1</td>
              <td>172.191.223.124</td>
              <td>300万条</td>
              <td>1335.2万条</td>
              <td>1335.2万条</td>
            </tr>
            <tr>
              <td>3</td>
              <td>交换服务1</td>
              <td>172.191.223.138</td>
              <td>300万条</td>
              <td>1325万条</td>
              <td>1325万条</td>
            </tr>
            <tr>
              <td>4</td>
              <td>门户</td>
              <td>172.191.223.15</td>
              <td>300万条</td>
              <td>1335.2万条</td>
              <td>1335.2万条</td>
            </tr>
            <tr>
              <td>5</td>
              <td>门户</td>
              <td>172.191.223.15</td>
              <td>300万条</td>
              <td>1325万条</td>
              <td>1325万条</td>
            </tr>
            <tr>
              <td>6</td>
              <td>门户1</td>
              <td>172.191.223.15</td>
              <td>300万条</td>
              <td>1335.2万条</td>
              <td>1335.2万条</td>
            </tr>
            <tr>
              <td>7</td>
              <td>门户1</td>
              <td>172.191.223.15</td>
              <td>300万条</td>
              <td>1325万条</td>
              <td>1325万条</td>
            </tr>
            <tr>
              <td>8</td>
              <td>门户1</td>
              <td>172.191.223.15</td>
              <td>300万条</td>
              <td>1335.2万条</td>
              <td>1335.2万条</td>
            </tr>
            <tr>
              <td>9</td>
              <td>门户1</td>
              <td>172.191.223.15</td>
              <td>300万条</td>
              <td>1325万条</td>
              <td>1325万条</td>
            </tr>
            <tr>
              <td>10</td>
              <td>门户1</td>
              <td>177.191.223.15</td>
              <td>300万条</td>
              <td>1335.2万条</td>
              <td>1335.2万条</td>
            </tr>
          </tbody>
        </table>
      </div><!--dialog-body end-->
    </div><!--dialog-win end-->
  </div><!--dialog end-->



</body>
</html>
<script>

  (function($){
    $(window).load(function(){
      $(".dialog-body").mCustomScrollbar({
        autoHideScrollbar:true,
        advanced:{
          autoExpandHorizontalScroll:true
        }
      });
    });
  })(jQuery);

  $(document).ready(function(){
// $(".col-left .table thead tr th:gt(2),.col-left .table tbody > tr > td:gt(2)").hide();
$(".col-left .table").find("tr").each(function() {
  $(this).children("th:gt(2),td:gt(2)").hide();
})

$("#tablefull").on('click',  function() {
 if($(this).hasClass("open")) {
  $(this).prop("class","");
  $(".col-left .table").find("tr").each(function() {
    $(this).children("th:gt(2),td:gt(2)").hide();
  })
  $(".col-left").stop(true).animate({"width": '20%'},400);
  $(".col-right").stop(true).animate({"width": '80%',"display":"none"},400,function(){ $(".col-right").show();});
}
else{
  $(this).prop("class","open");
  $(".col-left .table").find("tr").each(function() {
    $(this).children("th:gt(2),td:gt(2)").show();
  })
  $(".col-left").stop(true).animate({"width": '100%'},400);
  $(".col-right").hide();stop(true).animate({"width": '0'},400);

}
});


$(".scrollbar").mCustomScrollbar({
  autoHideScrollbar:true,
  advanced:{
    autoExpandHorizontalScroll:true
  }
});

$(".dropdown-menu li:eq(0)").on("click",function(){
  console.log($(this).parents(".open"));
  $(this).parents(".open").removeClass('open');
  $(".dialog").show();
})

$(".dropdown").on("click", "button", function() {
  $(this).parent().hasClass('open') ? $(this).parent().removeClass('open') : $(this).parent().addClass('open');
})


$(".dialog .close,#cancel").on("click",function(){
  $(".dialog").hide();
})

$(".table tr").on("click", "td:eq(2) a", function() {
  $(this).parents("tr").siblings().removeClass('active').end().addClass('active') ;
  $("#info").show()
});



})


var setting = {
  check: {
    enable: true
  },
  data: {
    simpleData: {
      enable: true
    }
  }
};

var zNodes =[
{ id:1, pId:0, name:"DBPPOTAL", open:true},
{ id:11, pId:1, name:"T-USERINFO"},
{ id:12, pId:1, name:"T-LOG"},
{ id:13, pId:1, name:"T-LOGIN"},
{ id:14, pId:1, name:"T-IP-INFO"},

{ id:2, pId:0, name:"DB-WEBSITE"},
{ id:21, pId:2, name:"T-DB-NEW"},
{ id:22, pId:2, name:"T-DB-2016"},
{ id:23, pId:2, name:"T-DB-INFO2016-TEMP"},

{ id:3, pId:0, name:"DB-WASKL"},
{ id:31, pId:3, name:"T-SQMSL"},
{ id:32, pId:3, name:"T-SMQXH-JSK"},
{ id:33, pId:3, name:"T-BMSL-ZSJD"},

{ id:4, pId:0, name:"DB-ORACL-DJS"},
{ id:41, pId:4, name:"T-SKA"},
{ id:42, pId:4, name:"T-ZJSL2"},
{ id:43, pId:4, name:"T-Z,MWNZ"},
{ id:44, pId:4, name:"T-MBMSA"},
];


option = {
  title: {
    text: 'IP访问量排名'
  },
  tooltip: {
    trigger: 'item',
    formatter: " {b} {a}: {c}",
  },
  grid:{
    x:'20%'
  },
  yAxis: {
    data: ['172.23.87.221','192.187.24.124','172.17.24.124','189.172.27.28','172.3.2.41']
  },
  xAxis: {},
  series: [{
    name: '访问次数',
    type: 'bar',
    barWidth: 20,
    data: [752,992, 1037, 1150,1223]
  }]
};
var myChart1 = echarts.init(document.getElementById('chart1'));
myChart1.setOption(option, true);

option2 = {
  title: {
    text: 'IP来源分布'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b} {a}: {c} ({d}%)'
  },
  series: [
  {
    name:'IP数',
    type:'pie',
    selectedMode: 'single',
    selectedOffset: 10,
    radius: ['42%', '55%'],
    data:[
    {value:4135, name:'3G电信FTP集群'},
    {value:679, name:'3G联通FTP集群'},
    {value:348, name:'未知终端'},
    {value:148, name:'门户网站'}

    ]
  }
  ]
};
var myChart2 = echarts.init(document.getElementById('chart2'));
myChart2.setOption(option2, true);

option3 = {
  title: {
    text: '操作类型分布'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{b} {a} : {c} ({d}%)"
  },
  series: [
  {
    name:'次数',
    type:'pie',
    selectedMode: 'single',
    selectedOffset: 10,
    radius: ['42%', '55%'],
    data:[
    {value:4135, name:'查看'},
    {value:679, name:'修改'},
    {value:348, name:'写入'},
    {value:148, name:'删除'}

    ]
  }
  ]
};
var myChart3 = echarts.init(document.getElementById('chart3'));
myChart3.setOption(option3, true);


option4 = {
  title : {
    text: '每日流量规律',
    subtext: ''
  },
  tooltip : {
    trigger: 'item',
    formatter: "{b} {a} : {c}  "
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis : [
  {
    type : 'category',
    boundaryGap : false,
    data : ['0点','1点','2点','3点','4点','5点','6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点']
  }
  ],
  yAxis : [
  {
    type : 'value'
  }
  ],
  series : [
  {
    name:'访问次数',
    type:'line',
    smooth:true,
    data:[37,33,30,35,22,60,43,78,77,68,68,69,63,60,65,62,60,73,78,77,68,68,59,46]
  }
  ]
};
var myChart4 = echarts.init(document.getElementById('chart4'));
myChart4.setOption(option4, true);
</script>